<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="<?=ROOT_URL?>dev/lib/jquery.min.js"></script>

    <script src="<?=ROOT_URL?>dev/lib/fine-uploader/jquery.fine-uploader.js"></script>

    <!-- Fine Uploader Gallery template
    ====================================================================== -->
    <script type="text/template" id="qq-simple-thumbnails-template">
        <div class="qq-uploader-selector qq-uploader"  >
            <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
                <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
            </div>
            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                <span class="qq-upload-drop-area-text-selector"></span>
            </div>
            <div class="qq-upload-button-selector qq-upload-button">
                <div>Upload a file</div>
            </div>
            <span class="qq-drop-processing-selector qq-drop-processing">
            <span>Processing dropped files...</span>
            <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
        </span>

        </div>
    </script>

    <title>Fine Uploader Gallery View Demo</title>
</head>
<body>
<!-- Fine Uploader DOM Element
====================================================================== -->
<div id="fine-uploader-gallery">AAAAAAAAAA</div>

<!-- Your code to create an instance of Fine Uploader and bind to the DOM/template
====================================================================== -->
<script>
    $('#fine-uploader-gallery').fineUploader({
        template: 'qq-simple-thumbnails-template',
        request: {
            endpoint: '/issue/main/upload'
        },
        thumbnails: {
            placeholders: {
                waitingPath: '<?=ROOT_URL?>dev/lib/fine-uploader/placeholders/waiting-generic.png',
                notAvailablePath: '<?=ROOT_URL?>dev/lib/fine-uploader/placeholders/not_available-generic.png'
            }
        },
        validation: {
            allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']
        }
    });

    $("#my-file-uploader").fineUploader({
        request: {
            endpoint: '/issue/main/upload'
        },
        classes: {
            success: 'alert alert-success',
            fail: 'alert alert-error',
            button: 'my-custom-class'
        },
        template: '<div class="qq-uploader">' +
        '<div class="my-custom-class"><div>my upload</div></div>' +
        '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
        '<ul class="qq-upload-list"></ul>' +
        '</div>'
    });
</script>
</body>
</html>